import PropsTypes from 'prop-types';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { px2dp } from 'rn-xiaobu-utils';
import flexStyle from '../../../configs/flex';
import Icon from '../../public/icon';
import fontsize from '../../../configs/fontsize';

export default class BusNav extends React.Component {
  static propsTypes={
    notice: {
      title: PropsTypes.string,
      content: PropsTypes.string,
      url: PropsTypes.string
    }
  }
  _jumpToNoticeDetail() {
    // TODO:跳转公告详情
  }
  render() {
    console.log(this.props.notice)
    return (
      <TouchableOpacity style={[styles.wrapper, flexStyle.flexH, flexStyle.flexVc, flexStyle.flexHsb]} onPress={this._jumpToNoticeDetail}>
        <View style={[flexStyle.flexH, flexStyle.flexVc]}>
          <View style={[styles.iconWrapper, flexStyle.flexHc, flexStyle.flexVc]}>
            <Icon size={48} name={'inform'}></Icon>
          </View>
          <Text numberOfLines={1} ellipsizeMode={'tail'}
            style={[fontsize.fontsize24, styles.title]}>{this.props.notice.title}</Text>
        </View>
        <Icon name={'rightangel'} size={38}
          color={'#D8D8D8'}></Icon>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    width: px2dp(750),
    height: px2dp(100),
    backgroundColor: '#ffffff',
    paddingHorizontal: px2dp(30),
    marginBottom: px2dp(16)
  },
  iconWrapper: {
    width: px2dp(70),
    height: px2dp(70),
    borderRadius: px2dp(8),
    backgroundColor: '#F2F5F6'
  },
  title: {
    marginLeft: px2dp(32),
    overflow: 'hidden',
    width: px2dp(547)

    // lineHeight: px2dp(28),
    // height: px2dp(28)
  }
})